<template>
	<div class="roomInformation">
		<panel @add="addUser" @search="search"></panel>
		<addAppointment :dialogFormVisible="showAddDialog" @closeDialog="showAddDialog=false" @refresh="refresh" :addTemp="{...addTemp}" :urlTemp="urlTemp"></addAppointment>
		<roomAppointmentList :roomList="roomList" class="list" @change="change($event); dialogFormVisible = true"></roomAppointmentList>
		<el-pagination background layout="prev, pager, next" :total="total" :page-size="Number(page_num)" @current-change="handleCurrentChange" class="pagination"></el-pagination>
		<roomAppointmentUpdate :dialogFormVisible="dialogFormVisible" @closeDialog="dialogFormVisible = false" :toChangeRow="toChangeRow" @refresh="refresh"></roomAppointmentUpdate>
	</div>
</template>

<script>
	import roomAppointmentList from "@/components/room/roomAppointmentList";
	import panel from "@/components/room/roomAddAppointment";
	import roomAppointmentUpdate from "@/components/room/roomAppointmentUpdate";
	import addAppointment from '@/components/room/addAppointment';
	export default {
		name: "roomInformation",
		data() {
			return {
				roomList: [],
				page_now: undefined,
				total: undefined,
				page_num: undefined,
				toChangeIndex: undefined,
				dialogFormVisible: false,
				showAddDialog: false,
				toChangeRow: null,
				searchVal: '',
				addTemp: {
					item_id: "",
					user_id: "",
					checkin_time: "",
					checkout_time: "",
					amount: "",
					price: "",
					status: ""
				},
				urlTemp: {}
			};
		},
		components: {
			roomAppointmentList,
			panel,
			roomAppointmentUpdate,
			addAppointment
		},
		methods: {
			addUser: function() {
				this.showAddDialog = true;
				this.urlTemp = { ...this.urlTemp
				};
			},
			search: async function(val) {
				// alert(val);
				// /ycwAdmin/user/getUserList?key=12345;
				let data = await this._axios
					.get(`/ycw/rooms/getAppointmemtList?page=2&num=10&key=${val}`)
					.then(data => data.data.data);
				console.log(data);
				this.page_now = data.page_now;
				this.total = data.page_total * data.page_num;
				this.userList = data.data;
				this.page_num = data.page_num;
			},
			change: function(index) {
				console.log(index);
				this.toChangeRow = this.roomList[index];
			},
			// 改变页码
			handleCurrentChange: async function(val) {
				let data = await this._axios
					.get(`/ycw/rooms/getAppointmemtList?page=${val}&num=10`)
					.then(data => data.data.data);
				this.roomList = data.data;
			},
			refresh: async function() {
				let data = await this._axios
					.get("/ycw/rooms/getAppointmemtList?page=1&num=10")
					.then(data => data.data.data);

				this.roomList = data.data;
				this.page_now = data.page_now;
				this.total = data.page_total * data.page_num;
				this.page_num = data.page_num;
			}
		},
		mounted: async function() {
			this.refresh();
		}
	};
</script>

<style lang="scss" scoped>
	.pagination {
		margin-top: 10px;
	}

	.list {
		height: 60vh;
	}
</style>
